<template>
	<view class="container">
		<view class="user-section">
			<image class="bg" src="http://qsg.wuminginfo.com/bg_mine.png"></image>
			<view class="user-info-box">
				<view class="member-top-c">
					<template>
						<view style="">
							<view style="position: fixed;top: 30rpx;left: 35rpx;color: #FFFFFF;font-weight: 500;letter-spacing: 2rpx;">
								<text>商户中心</text>
							</view>
							<image class='portrait' mode="aspectFill" src='/static/user.jpg'></image>
						</view>
						<view class='user-name' style="font-size: 30rpx;padding-left: 5rpx;">
							<!-- {{ userDetailInfo.nickname }} -->
							<view>
								<text
									style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 500;color: #FFFFFF">【{{store.name}}】</text>
							</view>
							<view style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;margin-left: 6rpx;">
								<text
									style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 500;color: #FFFFFF;">店长:{{userInfo.nickname}}</text>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>
		<!-- 订单分类 -->
		<view class="orders">
			<view style="display: flex;">
				<view class="report">
					<text style="margin-left: 30rpx;">经营统计</text>
				</view>
				<view class="date">
					<text>{{date}}</text>
				</view>
			</view>
			<view class="reportdetail">
				<view class="detailflex">
					<view class="detailtxt"><text><text style="color: #ff0000;font-size: 26rpx;font-weight: 600;">{{dataInfo.today.money}}</text>元</text></view>
					<view class="detailtxt">日交易金额</view>
					<view class="detailtxt"><text><text style="color: #55aa00;font-size: 26rpx;font-weight: 600;">{{dataInfo.today.num}}</text>单</text></view>
					<view class="detailtxt">日交易订单</view>
				</view>
				<view class="detailflex">
					<view class="detailtxt"><text><text style="color: #ff0000;font-size: 26rpx;font-weight: 600;">{{dataInfo.yesterday.money}}</text>元</text></view>
					<view class="detailtxt">昨日交易金额</view>
					<view class="detailtxt"><text><text style="color: #55aa00;font-size: 26rpx;font-weight: 600;">{{dataInfo.yesterday.num}}</text>单</text></view>
					<view class="detailtxt">昨日交易订单</view>
				</view>
				<view class="detailflex">
					<view class="detailtxt"><text><text style="color: #ff0000;font-size: 26rpx;font-weight: 600;">{{dataInfo.month.money}}</text>元</text></view>
					<view class="detailtxt">当月交易金额</view>
					<view class="detailtxt"><text><text style="color: #55aa00;font-size: 26rpx;font-weight: 600;">{{dataInfo.month.num}}</text>单</text></view>
					<view class="detailtxt">当月交易订单</view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="navbutton">
			<view class="cell"
				style="border-bottom-style: solid;border-bottom-color: #E8E8E8;border-bottom-width: 1rpx;"
				@click="goDetail(2)">
				<view class="iconfont icon-set" style="color: #555555;font-size: 32rpx;"></view>
				<view class="celltxt"><text>设备管理</text></view>
				<view class="iconfont icon-more" style="color: #9A9A9A;margin-left: 440rpx;"></view>
			</view>
			<view class="cell"
				style="border-bottom-style: solid;border-bottom-color: #E8E8E8;border-bottom-width: 1rpx;"
				 @click="goDetail(6)">
				<view class="iconfont icon-open" style="color: #555555;font-size: 32rpx;"></view>
				<view class="celltxt"><text>房间管理</text></view>
				<view class="iconfont icon-more" style="color: #9A9A9A;margin-left: 440rpx;"></view>
			</view>
			<view style="height: 10rpx;"></view>
			<view class="cell"
				style="border-bottom-style: solid;border-bottom-color: #E8E8E8;border-bottom-width: 1rpx;"
				 @click="goDetail(3)">
				<view class="iconfont icon-date" style="color: #555555;font-size: 32rpx;"></view>
				<view class="celltxt"><text>套餐管理</text></view>
				<view class="iconfont icon-more" style="color: #9A9A9A;margin-left: 440rpx;"></view>
			</view>
			<view class="cell"
				style="border-bottom-style: solid;border-bottom-color: #E8E8E8;border-bottom-width: 1rpx;"
				 @click="goDetail(4)">
				<view class="iconfont icon-order-all" style="color: #555555;font-size: 32rpx;"></view>
				<view class="celltxt"><text>订单管理</text></view>
				<view class="iconfont icon-more" style="color: #9A9A9A;margin-left: 440rpx;"></view>
			</view>
			<view style="height: 10rpx;"></view>
			<view class="cell"
				style="border-bottom-style: solid;border-bottom-color: #E8E8E8;border-bottom-width: 1rpx;"
				 @click="goDetail(5)">
				<view class="iconfont icon-recharge" style="color: #555555;font-size: 32rpx;"></view>
				<view class="celltxt"><text>经营统计</text></view>
				<view class="iconfont icon-more" style="color: #9A9A9A;margin-left: 440rpx;"></view>
			</view>
			<view class="cell"  @click="goDetail(8)">
				<view class="iconfont icon-money" style="color: #555555;font-size: 32rpx;"></view>
				<view class="celltxt"><text>充值套餐</text></view>
				<view class="iconfont icon-more" style="color: #9A9A9A;margin-left: 440rpx;"></view>
			</view>
			<view style="height: 10rpx;"></view>
			<view class="cell"
				style="border-bottom-style: solid;border-bottom-color: #E8E8E8;border-bottom-width: 1rpx;"
				 @click="goDetail(7)">
				<view class="iconfont icon-coin" style="color: #555555;font-size: 32rpx;"></view>
				<view class="celltxt"><text>会员管理</text></view>
				<view class="iconfont icon-more" style="color: #9A9A9A;margin-left: 440rpx;"></view>
			</view>
			<view class="cell" @click="goDetail(9)">
				<view class="iconfont icon-fresh" style="color: #555555;font-size: 32rpx;"></view>
				<view class="celltxt"><text>保洁管理</text></view>
				<view class="iconfont icon-more" style="color: #9A9A9A;margin-left: 440rpx;"></view>
			</view>
			<view style="height: 10rpx;"></view>
			<view class="cell" @click="goDetail(10)">
				<view class="iconfont icon-meituan-fill" style="color: #555555;font-size: 32rpx;"></view>
				<view class="celltxt"><text>团购管理</text></view>
				<view class="iconfont icon-more" style="color: #9A9A9A;margin-left: 440rpx;"></view>
			</view>
			<view style="height: 40rpx;"></view>
		</view>
	</view>
</template>
<script>
	import Api from '@/common/api';
	import listCell from '@/components/mix-list-cell';
	import '@/static/icon/iconfont.css';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			listCell,
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				userDetailInfo: {},
				role: 0, //0管理1打扫
				openId: '',
				userInfo: {},
				dataInfo: {},
				reports:{},
				deviceInfo: {
					totalDevice: 0,
					onlineDevice: 0,
					offlineDevice: 0
				},
				store: {},
				pattern: {
					color: 'gray',
					backgroundColor: '#FFFFFF',
					selectedColor: '#007AFF',
					buttonColor: '#127202'
				},
				content: [{
					iconPath: '/static/openDoor.png',
					selectedIconPath: '/static/componentHL.png',
					text: '开大门',
					active: false
				}],
				date:''
			};
		},
		async onShow() {},
		async onLoad(options) {
			let that = this;
			that.date = that.dateFormat(new Date());
			if (options.code) {
				let params = {
					code: options.code
				}
				let data = await Api.apiCall('get', Api.member.weixinLogin, params);
				if (data.userInfo) {
					that.userInfo = data.userInfo;
					if(data.userInfo.storeId==1||data.userInfo.storeId==0){
						uni.showModal({
							title: '提示',
							content: '当前用户未登录',
							showCancel:false,
							success: function (res) {
							}
						});
						return;
					}
					that.getDeviceInfo(data.userInfo.storeId);
					that.bindRole(data.userInfo.roleName, data.userInfo.storeId)
					that.loadData(data.userInfo.storeId);
					that.getStore(data.userInfo.storeId);
				}
			}

		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			async loadData(storeId) {
				this.getData(storeId);
			},
			async getData(storeId) {
				let params = {
					storeId: storeId
				}
				let data = await Api.apiCall('get', Api.qsg.getReport, params);
				if (data) {
					console.log(data)
					this.dataInfo = data;
				}
			},
			async getStore(storeId) {
				let params = {
					storeId: storeId
				}
				let data = await Api.apiCall('get', Api.qsg.getStore, params);
				if (data) {
					this.store = data
				}
			},
			async getDeviceInfo(storeId) {
				let that = this;
				let params = {
					storeId: storeId
				}
				let data = await Api.apiCall('get', Api.qsg.getDeviceInfo, params);
				if (data) {
					that.deviceInfo.totalDevice = data.totalDevice;
					that.deviceInfo.onlineDevice = data.onlineDevice;
					that.deviceInfo.offlineDevice = data.offlineDevice;
				}
			},
			bindRole(roleName, storeId) {
				if (roleName == '打扫') {
					uni.redirectTo({
						url: '/pages/user/baojie?isAdmin=false&storeId=' + storeId
					})
				}
			},
			goDetail(type) {
				if(this.userInfo.storeId == 1||this.userInfo.storeId == 0){
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '请退出到公众号首页点击商户登录进行绑定',
						success: function (res) {
						}
					});
					return false;
				}
				if (type == 2) {
					uni.navigateTo({
						url: '/pages/device/index?storeId=' + this.userInfo.storeId
					})
				} else if (type == 3) {
					uni.navigateTo({
						url: '/pages/meal/index?storeId=' + this.userInfo.storeId
					})
				} else if (type == 4) {
					uni.navigateTo({
						url: '/pages/order/order?storeId=' + this.userInfo.storeId
					})
				} else if (type == 5) {
					uni.navigateTo({
						url: '/pages/report/report?storeId=' + this.userInfo.storeId
					})
				} else if (type == 6) {
					uni.navigateTo({
						url: '/pages/user/dasao?isAdmin=true&storeId=' + this.userInfo.storeId
					})
				} else if (type == 7) {
					uni.navigateTo({
						url: '/pages/member/member?storeId=' + this.userInfo.storeId
					})
				} else if (type == 8) {
					uni.navigateTo({
						url: '/pages/recharge/recharge?storeId=' + this.userInfo.storeId
					})
				} else if (type == 9) {
					uni.navigateTo({
						url: '/pages/user/baojie?storeId=' + this.userInfo.storeId
					})
				} else if (type == 10) {
					uni.navigateTo({
						url: '/pages/cert/cert?storeId=' + this.userInfo.storeId
					})
				}
			},
			// 获取本地保存的图片
			getImg() {
				let _that = this;
				var timestamp = new Date().getTime();
				uni.getImageInfo({
					src: `${wx.env.USER_DATA_PATH}/autograph.png`,
					success: function(res) {
						console.log(res.path)
						_that.srcA = res.path
						// hasQM = true
					},
					fail: function(err) {
						console.log(err)
						_that.srcA = ''
					},
				})
			},
			//删除缓存的图片
			delPic() {
				let fsm = uni.getFileSystemManager();
				fsm.unlink({
					filePath: `${wx.env.USER_DATA_PATH}/autograph.png`,
					success(res) {
						console.log(res)
						_that.srcA = ''
						// hasQM = false
					},
					fail(res) {
						console.error(res)
					}
				})
			},
			dateFormat(date) {
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day;
			},
			...mapMutations(['login', 'logout']),
			toLogout() {
				uni.showModal({
					content: '确定要退出登录么',
					success: e => {
						if (e.confirm) {
							this.logout();
							setTimeout(() => {
								uni.navigateBack();
							}, 200);
						}
					}
				});
			},
			rediTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.redirectTo({
					url: url
				});
			},
			toLogin() {
				uni.redirectTo({
					url: '/pages/public/login'
				});
			},
			trigger(e) {
				let that = this;
				if (e.item.text == '开大门') {
					that.openDoor(that.userInfo.storeId);
				}
				if(e.item.text=='充值'){
					that.chongzhi(that.userInfo.storeId);
				}
			},
			chongzhi(storeId){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '将给当前账号在当前门店充值5万积分,是否确定充值?',
					success: (e) => {
						if (e.confirm) {
							that.addJifen();
						}
					}
				})
			},
			async addJifen(){
				let params = {
					storeId:this.userInfo.storeId,
					memberId:this.userInfo.id
				}
				let data = await Api.apiCall('post', Api.qsg.addJifen, params);
				if(data){
					uni.showToast({
						title:'充值成功'
					})
				}
			},
			fabClick() {},
			async openDoor(storeId){
				console.log(storeId)
				let data = await Api.apiCall('post', Api.qsg.openDamen, {id:storeId});
				if(data){
					uni.showToast({
						title:'操作成功'
					})
				}
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.user-remainder {
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 1.8;
	}

	.member-top-c {
		margin-left: 5rpx;
		margin-top: 140rpx;
		display: flex;
	}

	.user-name {
		line-height: 1;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		width: 400rpx;
		color: #FFFFFF;
		padding-top: 20rpx;
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.user-section {
		height: 440rpx;
		position: relative;
		box-sizing: border-box;
		padding: 55upx 30upx;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.retailtit {
		width: 100%;
		height: 60upx;
		line-height: 40upx;
		font-size: 32upx;
		font-weight: bold;
		color: #333;
	}

	.detailflex {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.retaillist {
		display: flex;
		width: 100%;
		border-bottom: 1upx solid #f6f6f6;
		text-align: center;
		padding-bottom: 20upx;
		margin-bottom: 20upx;
	}

	.retaillist:last-child {
		padding-bottom: 0;
		margin-bottom: 0;
		border-bottom: none;
	}

	.retaileach {
		flex: 1;
	}

	.retailtxt {
		font-size: 26upx;
		color: #949494;
		line-height: 50upx;
	}

	.retailname {
		font-size: 36upx;
		color: #e61a0f;
		font-weight: bold;
	}

	.retailtitle {
		font-size: 30upx;
		color: #333;
	}

	.user-info-box {
		height: 190upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;
		margin: 0 auto;

		.portrait {
			width: 140upx;
			height: 140upx;
			border: 5upx solid #fff;
			border-radius: 50%;
			margin: 0 auto 20upx;
			display: block;

			image {
				width: 130upx;
				height: 130upx;
				border-radius: 50%;
			}
		}

		.username {
			font-size: $font-lg + 6upx;
			color: $font-color-dark;
			margin-left: 20upx;
		}
	}

	.detailtxt {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #414141

	}

	.login-btn {
		color: #333;
		width: 180upx;
		height: 50upx;
		line-height: 50upx;
		border-radius: 25upx;
		background: #ffffff;
		font-size: 12px;
	}

	.reportdetail {
		display: flex;
	}

	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;

		.card-bg {
			position: absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}

		.b-btn {
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}

		.tit {
			font-size: $font-base + 2upx;
			color: #f7d680;
			margin-bottom: 28upx;

			.yticon {
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}

		.e-b {
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}

	.cover-container {
		background: $page-color-base;
		padding: 30upx 30upx;
		position: relative;
		background: #f5f5f5;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}

	.tj-sction {
		@extend %section;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}

	.order-section {
		@extend %section;
		padding: 28upx 0;
		margin-top: 20upx;

		.order-item {
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
		}

		.yticon {
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #e61a0f;
		}

		.icon-shouhoutuikuan {
			font-size: 44upx;
		}
	}

	.history-section {
		background: #fff;
		border-radius: 10upx;

		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;

			.yticon {
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}

		.h-list {
			white-space: nowrap;
			padding: 30upx 30upx 0;

			image {
				display: inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}

	.celltxt {
		width: 180rpx;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		margin-left: 22rpx;
		letter-spacing: 1rpx;
	}

	.contact-content {
		background: #f5f5f5;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.orders {
		width: 686rpx;
		height: 240rpx;
		background-color: #ffffff;
		position: relative;
		top: -130rpx;
		left: 32rpx;
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 24rpx;
	}

	.orderitem {
		flex: 1;
		height: 50rpx;
		text-align: center;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
	
	.date{
		font-size: 24rpx;
		margin-top: 7rpx;
		letter-spacing: 1rpx;
	}

	.functionDesc {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #555555;
		flex: 1;
	}

	.report {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 600;
		color: #555555;
		width: 500rpx;
	}

	.orderbutton {
		display: flex;
		flex-direction: column;
		height: 100rpx;
		flex: 1;
	}

	.navbutton {
		height: 500rpx;
		width: 100%;
		margin-top: 10rpx;
		position: relative;
		top: -80rpx;
	}

	.cell {
		height: 96rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding-left: 32rpx;
	}
</style>
